<template>
  <div>
    <el-radio-group v-model="radio">
      <el-radio-button label="配电图"></el-radio-button>
      <el-radio-button label="10kV系统图"></el-radio-button>
      <el-radio-button label="0.4kV系统图"></el-radio-button>
    </el-radio-group>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin: 20px 0">
      <el-breadcrumb-item>当前位置</el-breadcrumb-item>
      <el-breadcrumb-item>配电监控</el-breadcrumb-item>
      <el-breadcrumb-item>回路监控</el-breadcrumb-item>
      <el-breadcrumb-item v-if="radio == '配电图'"
        ><a href="#/historicalAlarm" style="cursor: pointer; color: #fff"
          >配电图</a
        ></el-breadcrumb-item
      >
      <el-breadcrumb-item v-if="radio == '10kV系统图'"
        ><a href="#/historicalAlarm" style="cursor: pointer; color: #fff"
          >10kV系统图</a
        ></el-breadcrumb-item
      >
      <el-breadcrumb-item v-if="radio == '0.4kV系统图'"
        ><a href="#/historicalAlarm" style="cursor: pointer; color: #fff"
          >4kV系统图</a
        ></el-breadcrumb-item
      >
    </el-breadcrumb>
    <div style="width: 100%; height: 100%">
      <!-- <iframe
        　　ref="newScreen"
        　　@load="loading = false"
        　　frameborder="0"
        　　src="http://127.0.0.1:5501/rua.html"
        　　width="100%"
        　　height="800px"
        　　id="ysOpenDevice"
        　　allowfullscreen
        v-if="reloadIframe"
      >
      </iframe> -->
      <iframe
        　　ref="newScreen"
        　　@load="loading = false"
        　　frameborder="0"
        　　:src="src"
        　　width="100%"
        　　height="800px"
        　　id="ysOpenDevice"
        　　allowfullscreen
        v-if="reloadIframe"
      >
      </iframe>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      radio: "配电图",
      reloadIframe: true,
      src: "dianlutu/rua.html",
    };
  },
  mounted() {
    this.analysisRouter();
  },
  watch: {
    $route: {
      handler(to, from) {
        this.analysisRouter();
      },
    },
    deep: true,
  },
  methods: {
    analysisRouter() {
      this.loading = true;
      const { codeSearch, url } = this.$route.params;
      this.reloadIframe = false;
      this.$nextTick(() => {
        this.iframeUrl = `${url}/${codeSearch}`;
        this.reloadIframe = true;
      });
    },
  },
};
</script>
  
<style scoped>
.select {
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.el-select {
  width: 120px !important;
  /* border: 1px solid #fff !important; */
}

::v-deep .el-select,
::v-deep .el-input,
::v-deep .el-input__inner {
  height: 30px !important;
  background: none;
  color: #fff;
  /* border: 1px solid #fff; */
  border-radius: 0px;
  align-items: center;
  /* text-align: center; */
}

::v-deep .el-input__icon {
  line-height: 0px !important;
}

/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
}

::v-deep.el-pagination__total {
  color: #fff;
}

::v-deep .el-radio-button__inner {
  background-color: transparent;
  border: none;
  color: #fff;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 0px;
  border-left: none;
}

::v-deep .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0px;
}

::v-deep .el-table tbody tr:hover > td {
  background-color: rgb(27, 79, 133) !important;
}

::v-deep .el-tree {
  position: relative;
  cursor: default;
  background: transparent;
  color: #fff;
}

::v-deep .el-tree-node > .el-tree-node__content:hover {
  background-color: rgb(27, 79, 133) !important;
}

::v-deep
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  color: #fff;
  background: rgb(27, 79, 133) !important;
}

::v-deep .el-date-editor .el-range-input {
  background: transparent;
  color: #fff;
}

::v-deep .el-radio__label {
  color: #fff;
}
</style>